<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$siteTitle}</title>
<link href="__ADMIN__/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__ADMIN__/js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="__ADMIN__/wx/css/default.css">
<script type="text/javascript" src="__ADMIN__/wx/js/ecmall.js" charset="utf-8"></script>
<script type="text/javascript" src="__ADMIN__/wx/js/admin.js" charset="utf-8"></script>
<style type="text/css">
.demo{width:620px; margin:30px auto}
.demo p{line-height:32px}
.btnfile{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.btnfile input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
.bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
.files{height:22px; line-height:22px; margin:10px 0}
.delimg{margin-left:20px; color:#090; cursor:pointer}
.place{height:40px; background:url(__ADMIN__/images/righttop.gif) repeat-x;}
.place span{line-height:40px; font-weight:bold;float:left; margin-left:12px;}
.placeul li{float:left; line-height:40px; padding-left:7px; padding-right:12px; background:url(__ADMIN__/images/rlist.gif) no-repeat right;}
.placeul li:last-child{background:none;}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		$(".click").click(function() {
			$(".tip").fadeIn(200);
		});

		$(".tiptop a").click(function() {
			$(".tip").fadeOut(200);
		});

		$(".sure").click(function() {
			$(".tip").fadeOut(100);
		});

		$(".cancel").click(function() {
			$(".tip").fadeOut(100);
		});
	});

</script>
</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="#">首页</a></li>
			<li><a href="#">修改银行卡</a></li>
		</ul>
	</div>
	<div class="col_main" style="margin: 20px 50px;">
        	<form action="{:U('editBank')}" method="post">
            <div class="main_bd">
                <div class="media_edit_area">
                    <div id="js_appmsg_editor">
                        <div class="appmsg_editor" style="margin-top: 0px;">
                            <div class="inner">
                            	<input type="hidden" name="id" value="{$item.id}"/>
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">银行名称</label>
                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="bank_name" value="{$item.bank_name}"/></span>
                                </div>
                                
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">
                                        <strong class="title">银行图标</strong>
                                        <p class="js_cover_tip tips">（大图片建议尺寸：30像素 * 30像素）</p>
                                    </label>
                                    <div class="upload_wrap">
                                       	<div class="upload_box">
                                        	<input type="hidden" name="icon" id="icon" value="{$item.icon}"/>
                                            <div class="upload_area">
	                                            <div class="btnfile">
										            <span>上传</span>
										            <input id="fileupload" type="file" name="icon_upload">
										        </div>
										        <div class="progress">
										    		<span class="bar"></span><span class="percent">0%</span >
												</div>
										        <div class="files"></div>
										        <div id="showimg"><img src="__UPLOADS__/Bank/{$item.icon}" /></div>
	                                        </div>
	                                    </div>
	                                </div>
	                            </div>
                        	</div>
                    	</div>
                	</div>
	                <div class="tool_area">
	                    <div class="tool_bar border tc">
	                        <span id="js_submit" class="btn btn_input btn_primary"><button type="submit">保存</button></span>
	                    </div>
	                </div>
            	</div>
        	</div>
        </form>
	</div>
	
	<script src="__ADMIN__/js/plugins/fileupload/jquery.ui.widget.js"></script>
	<script src="__ADMIN__/js/plugins/fileupload/jquery.iframe-transport.js"></script>
	<script src="__ADMIN__/js/plugins/fileupload/jquery.fileupload.js"></script>
	
	<script type="text/javascript">
		$(function () {
			$("#fileupload").fileupload({
      			url: "{:U('/Admin/Index/uploadBankIcon')}",
      			dropZone: null,
      			pasteZone: null,
      			autoUpload: true,
      			limitConcurrentUploads: 5,
      			add: function (e, data) {
      				if (e.isDefaultPrevented()) {
      	                return false;
      	            }

      				$(".upload_wrap").show().find('.progress').show();
      	            data.submit();
      			},
      			formData:{
      				
      			},//如果需要额外添加参数可以在这里添加  
      			done:function(e, result){  
      		        var data = result.result;
      	          	var container = $(".upload_wrap");
      	          	
      	          	$("#icon").val(data.name);
      	          	
      	          	var showimg = $('#showimg');
      	          	showimg.html("<img src='"+data.url+"' style='width:30px; height:30px;'>");
      	          
      	          	container.find('.progress').hide();
      			},
      		    progress: function (e, data) {
      		    	var container = $(".upload_wrap");
      		    	var progress = Math.floor(e.delegatedEvent.loaded/e.delegatedEvent.total * 100);
      		    	container.find('.bar').attr('style', 'width:'+progress + '%');
      		    	container.find('.percent').text(progress + '%');
      		    }
      		});
		});
	</script>
</body>
</html>